<template>
	<view class="tagController">
		<view class="tagContainer">
			<view class="tagItem" :class="tagBgColor" v-bind:key="index" v-for="(tagText,index) in value">
				<view @tap="tapTag" style="display: flex;align-items: center; justify-content: center;"
					:data-text="tagText">{{tagText}}</view>
				<text v-if="isShowDelIcon" class="tagDelIcon" @tap="delTag" :data-text="tagText">x</text>
			</view>
		</view>
		<view class="tagInput" style="display: flex;" v-if="isShowAdd">
			<input type="text" v-model="tagString"  placeholder-style="font-size: 25rpx;" placeholder="输入新的标签,多个标签用逗号间隔" />
			<view
				style="background-color: #994278; margin-left: 20rpx;height: 65rpx;width: 90rpx;border: 1rpx solid #fff;border-radius: 15rpx;display: flex;align-items: center;justify-content: center;"
				type="default" size="mini" @tap="createTags">
				<text style="color: #fff;">添加</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'robby-tags',
		props: ['enableDel', 'bgColorType', 'value', 'enableAdd'],
		data() {
			return {
				tagString: '',
				isShowDelIcon: this.enableDel || false,
				isShowAdd: this.enableAdd || false
			}
		},
		computed: {
			tagBgColor: function() {
				if (this.bgColorType === null) {
					return 'tagBgDefault'
				} else if (this.bgColorType === 'primary') {
					return 'tagBgPrimary'
				} else if (this.bgColorType === 'success') {
					return 'tagBgSuccess'
				} else if (this.bgColorType === 'warn') {
					return 'tagBgWarning'
				} else if (this.bgColorType === 'error') {
					return 'tagBgError'
				} else if (this.bgColorType === 'purple') {
					return 'bg-purple'
				} else {
					return 'tagBgDefault'
				}
			}
		},
		methods: {
			createTags: function() {
				let tempTagArr = []
				if (this.tagString.length > 0) {
					let newvalue = this.tagString.split(/,|，/)
					for (let i = 0; i < newvalue.length; i++) {
						let newTag = newvalue[i].trim()

						if (newTag !== '' && this.value.indexOf(newTag) < 0) {
							tempTagArr.push(newTag)
						}
					}
				}
				this.tagString = ''
				this.value.splice(this.value.length, 0, ...tempTagArr)
				this.$emit('add', {
					currentTag: tempTagArr,
					allTags: this.value
				})
				this.$emit('input', this.value)
			},
			delTag: function(e) {
				let delTagText = e.currentTarget.dataset.text
				let delTagIndex = this.value.indexOf(delTagText)
				this.value.splice(delTagIndex, 1)
				this.$emit("delete", {
					currentTag: delTagText,
					allTags: this.value
				})
				this.$emit('input', this.value)
			},
			tapTag: function(e) {
				let selTagText = e.currentTarget.dataset.text
				this.$emit("click", selTagText)
			}
		}
	}
</script>

<style>
	.tagController {
		padding: 10upx;
	}

	.tagContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tagItem {
		padding: 0upx 20upx;
		margin: 10upx;
		border-radius: 40upx;
		color: white;
		display: flex;
		height: 70rpx;
	}

	.tagBgDefault {
		background-color: #cfcfcf;
		color: black;
	}

	.tagBgPrimary {
		background-color: #007aff;
	}

	.tagBgSuccess {
		background-color: #4cd964;
	}

	.tagBgWarning {
		background-color: #f0ad4e;
	}

	.tagBgError {
		background-color: #dd524d;
	}

	.tagDelIcon {
		margin-left: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #9c9292;
		height: 25rpx;
		width: 25rpx;
		border-radius: 50%;
		margin-top: 23rpx;
	}

	.tagInput {
		padding: 10upx;
	}

	.tagInput input {
		width: 100%;
		display: inline-block;
	}
</style>